import * as echarts from 'echarts';
import { useEffect, useState, useRef } from "react"

// ajax模拟数据
let axios = () => new Promise((resolve) => {
  resolve([
    { value: 1048, name: '分类1' },
    { value: 735, name: '分类2' },
    { value: 580, name: '分类3' },
    { value: 484, name: '分类4' },
    { value: 300, name: '分类5' }
  ])
})

function App() {
  let chartDom: any = useRef()
  let render = (data: any) => {
    const color = ["#d14", "#f006e9", "#1406e9", "#04ff9a", '#01ff0e', '#ffff01', '#fb7f04', '#693e33', '#bd779d', '#337ab7']
    var total = data.reduce((a: any, b: any) => a + b.value, 0)
    var dict: any = {}
    var evens = []
    var odd = []
    for (let i = 0; i < data.length; i++) {
      dict[data[i].name] = (data[i].value / total * 100).toFixed(1) + '%'
      if (i % 2 === 0) {
        evens.push({ ...data[i], color: color[i] })
      } else {
        odd.push({ ...data[i], color: color[i] })
      }
    }
    var myChart = echarts.init(chartDom.current);
    let option = {
      color,
      tooltip: {
        trigger: 'item'
      },
      legend: [
        {
          orient: 'horizontal',
          x: '85%',
          top: '80%',
          width: '50px',
          align: 'left',
          data: evens.map((item, index) => {
            return {
              textStyle: {
                'font-family': `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif`,
                fontSize: '16px'
                , color: item.color,
              },
              name: item.name,
              // 现在颜色是固定死的，就可以按顺序来加载svg转成base64编码的图了
              icon: `image://`
            }
          }),
          formatter: (name: any) => {
            return name + '\n' + dict[name];
          },
        },
        {
          orient: 'horizontal',
          x: '90%',
          top: '80%',
          width: '50px',
          align: 'left',
          data: odd.map((item, index) => {
            return {
              textStyle: {
                'font-family': `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif`,
                fontSize: '16px'
                , color: item.color,
              },
              name: item.name,
              // 现在颜色是固定死的，就可以按顺序来加载svg转成base64编码的图了
              icon: `image://`
            }
          }),
          formatter: (name: any) => {
            return name + '\n' + dict[name];
          },
        },
      ],

      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: data
        }
      ]
    };

    option && myChart.setOption(option);


  }
  useEffect(() => {
    axios().then(res => {
      render(res)
    })
  }, [])



  return (
    <div ref={chartDom} style={{ height: "100vh", width: "100%" }}>

    </div>
  );
}

export default App;
